<template>
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-input
          v-model="searchList.kw"
          style="width: 15%"
          placeholder="机会名称/联系人/公司名称"
          size="mini"
        ></el-input>
        <el-select
          v-model="searchList.stage"
          placeholder="销售阶段"
          size="mini"
        >
          <el-option
            v-for="item in salesStage"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          @click="search"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
      <div style="margin-top: 8px">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="showEditer(0)"
          >新增销售机会</el-button
        >
        <!-- <el-button
          type="edit"
          icon="el-icon-edit-outline"
          size="mini"
          @click="showEditer(1)"
          >编辑</el-button
        >
        <el-button type="del" icon="el-icon-delete" size="mini">删除</el-button> -->
        <!-- <el-button type="down" size="mini">模板下载</el-button>
        <el-button type="import" icon="el-icon-download" size="mini"
          >导入</el-button
        >
        <el-button type="out" icon="el-icon-upload2" size="mini"
          >导出</el-button
        > -->
      </div>
    </div>
    <div class="ba_main">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        height="250"
        tooltip-effect="dark"
        style="width: 100%"
        class="ellipsis"
          >
        <el-table-column
          label="机会名称"
            fixed>
          <template slot-scope="scope">
            <div class="edit_btn" @click="cdetails(scope.row.id)">
            <span :title="scope.row.title">{{scope.row.title!==""?scope.row.title:"--"}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="销售阶段"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.stage!==""?scope.row.stage:"--"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="预计成单日期" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.expect_date!==""?scope.row.expect_date:"--"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额(元)" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.amount!==""?scope.row.amount:"--"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="联系人" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.contacts_name!==""?scope.row.contacts_name:"--"}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <span style="margin-right: 10px">共{{ datanumber }}条</span>
        <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
        <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-left operable"
            :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
            @click="prevPage"
          ></i>
        </span>
        <div style="display: inline; margin: 0 10px">
          <el-input
            :title="searchList.page"
            style="width: 60px"
            v-model="searchList.page"
            @change="sizechange()"
            size="mini"
          ></el-input>
          <span style="margin: 0 5px 0 15px">/</span>
          <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
        </div>
        <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-right operable"
            :class="seenumber > datanumber ? 'pageOff' : 'pageOn'"
            @click="nextPage"
          ></i>
        </span>
        <span style="margin-left: 10px">每页</span>
        <el-select
          style="width: 70px"
          v-model="searchList.size"
          @change="sizechange()"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in sizennList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
        条
      </div>
    </div>
    <!-- 新增编辑 -->
    <el-dialog
      :title="titleSource"
      :close-on-click-modal="false"
      :visible.sync="dialogGh"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="ghForm"
          :rules="rulesGh"
          ref="ghForm"
          label-width="150px"
          class="demo-ruleForm"
        > 
          <el-form-item label="机会名称" prop="title">
            <el-input
            type="textarea" 
              v-model="ghForm.title"
              placeholder="请输入机会名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="销售阶段" prop="stage_id">
            <el-select v-model="ghForm.stage_id" filterable placeholder="请选择">
              <el-option
                v-for="item in salesStage"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意向产品" prop="goods_id">
            <el-select v-model="ghForm.goods_id" filterable multiple placeholder="请选择">
              <el-option
                v-for="item in intProductsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额(元)" prop="amount">
            <el-input v-model="ghForm.amount" placeholder="请输入金额"></el-input>
          </el-form-item>
          <el-form-item label="预计成单日期" prop="expect_date">
            <el-date-picker
              v-model="ghForm.expect_date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="竞争对手" prop="competitor">
            <el-input
              v-model="ghForm.competitor"
              placeholder="请输入竞争对手"
            ></el-input>
          </el-form-item>
          <el-form-item label="竞争对手信息" prop="competitor_remark">
            <el-input
            type="textarea"
              v-model="ghForm.competitor_remark"
              placeholder="请输入竞争对手信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ghForm.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="关键词" prop="keywords">
            <el-input
            type="textarea"
              v-model="ghForm.keywords"
              placeholder="请输入关键词"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts_id">
            <el-select :disabled="pagestart==0?false:true" v-model="ghForm.contacts_id" filterable default-first-option placeholder="请选择">
              <el-option
                v-for="item in contactsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="department_id">
            <el-select :disabled="pagestart==0?false:true" v-model="ghForm.department_id" filterable placeholder="请选择">
              <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetGh('ghForm')">取消</el-button>
        <el-button type="primary" @click="submitGh('ghForm')">提交</el-button>
      </div>
    </el-dialog>
    <!-- 放弃销售机会 -->
    <el-dialog
      title="放弃销售机会"
      :visible.sync="giveupS"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        :model="giveupData"
        status-icon
        :rules="gurules"
        ref="giveupData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="放弃原因" prop="give_remark">
          <el-input
            v-model="giveupData.give_remark"
            placeholder="请输入放弃原因"
          ></el-input>
        </el-form-item>
        <div class="footer">
<el-button type="primary" @click="submitGu('giveupData')"
            >提交</el-button
          >
          <el-button @click="resetGu('giveupData')">取消</el-button>
        </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 详情 -->
    <el-drawer
      title="销售记录详情"
      :visible.sync="detailsS"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      direction="rtl"
    >
      <div class="top_data">
        <div style="display:flex;">
          <div style="width:90%;">
          <div class="t_title"><img src="../../assets/img/head.png" alt="">
          <span>{{detailsData.title}}</span></div>
          <div class="t_content">
            <div>
              <span>所属企业：</span>
              <span class="edit_btn" @click="findEnterprise">{{detailsData.customer_name}}</span>
            </div>
            <div>
              <span>企业联系人：</span>
              <span class="edit_btn" @click="findContacts">{{detailsData.contacts_name}}</span>
            </div>
          </div>
        </div>
        <div class="operation" style="width:10%;">
          <span class="edit_btn" @click="showEditer(detailsData)">编辑</span>
          <span class="edit_btn" style="margin-left: 10px" @click="guEditer(detailsData.id)"
            >放弃</span
          >
        </div>
        </div>
        <el-steps class="step" :active="stageNumber" finish-status="success">
          <el-step v-for="(item,index) in salesStage" :key="index" :title="item.title" ></el-step>
        </el-steps>
      </div>
      <div class="drawer_pad">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="机会详情" name="data">
            <h6 class="operable" @click="visualizationList.basic = !visualizationList.basic"><i
                :class="
                  visualizationList.basic
                    ? 'el-icon-caret-bottom'
                    : 'el-icon-caret-top'
                "
              ></i
              ><span>基础信息</span></h6>
            <el-descriptions v-if="visualizationList.basic" :column="2">
              <el-descriptions-item label="销售机会">{{
                detailsData.title ? detailsData.title : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="销售阶段">{{
                detailsData.stage ? detailsData.stage : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="意向产品">{{
                detailsData.goods_name ? detailsData.goods_name : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="金额">
                {{ detailsData.amount ? detailsData.amount : "--" }}
              </el-descriptions-item>
              <el-descriptions-item label="预计成单日期">{{
                detailsData.expect_date ? detailsData.expect_date : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="竞争对手">{{
                detailsData.competitor ? detailsData.competitor : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="竞争对手信息">{{
                detailsData.competitor_remark
                  ? detailsData.competitor_remark
                  : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="备注">
                {{ detailsData.remark ? detailsData.remark : "--" }}
              </el-descriptions-item>
              <el-descriptions-item label="关键词">{{
                detailsData.keywords ? detailsData.keywords : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="联系人">{{
                detailsData.contacts_name
                  ? detailsData.contacts_name
                  : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="部门">{{
                detailsData.department
                  ? detailsData.department
                  : "--"
              }}</el-descriptions-item>
            </el-descriptions>
            <h6 class="operable" @click="visualizationList.custom = !visualizationList.custom"><i
                :class="
                  visualizationList.custom
                    ? 'el-icon-caret-bottom'
                    : 'el-icon-caret-top'
                "
              ></i
              ><span>自定义信息</span></h6>
            <el-descriptions v-if="visualizationList.custom" :column="2">
              <el-descriptions-item label="关键词">{{
                detailsData.keywords ? detailsData.keywords : "--"
              }}</el-descriptions-item>
            </el-descriptions>
            <h6 class="operable" @click="visualizationList.system = !visualizationList.system"><i
                :class="
                  visualizationList.system
                    ? 'el-icon-caret-bottom'
                    : 'el-icon-caret-top'
                "
              ></i
              ><span>系统信息</span></h6>
            <el-descriptions v-if="visualizationList.system" :column="2">
              <el-descriptions-item label="创建人">{{
                detailsData.create_user ? detailsData.create_user : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{
                detailsData.create_time ? detailsData.create_time : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="最近阶段变更">{{
                detailsData.update_time ? detailsData.update_time : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="重点关注">{{
                detailsData.follow ? detailsData.follow : "--"
              }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="销售机会日志" name="journal"
            >
            <div class="bigDetails" v-for="(item,index) in detailsData.log" :key="index">
              <span>{{item.create_time}}</span>
              <div style="margin-bottom:5px;">
                <span>
                  <i :class="item.before_info?'el-icon-edit-outline':'el-icon-folder-add'"></i>
                  {{item.after_info}}</span>
                <span style="float:right;">{{item.userid}}</span>
              </div>
              <div class="detailsLog">
                <span>{{item.before_info?item.before_info:'创建销售机会'}}</span>
              </div>
            </div>
            </el-tab-pane
          >
        </el-tabs>
      </div>
    </el-drawer>
    <detailscontacts
      ref="detailscontacts"
      :parentdetails="detailsId"
    ></detailscontacts>
    <details-enterprise ref="detailsEnterprise" :parentdetails="detailsEId"></details-enterprise>
  </div>
</template>

<script>
import detailscontacts from "../pageWorld/detailsContacts.vue"; // 联系人详情
import detailsEnterprise from "../pageWorld/detailsEnterprise.vue"; // 企业详情
export default {
  components: {
    detailscontacts,
    detailsEnterprise,
  },
  data() {
    return {
      pagestart: 0, // 页面新增编辑状态-0为新增，1为编辑
      loading: false,
      dialogEditer: false,
      detailsS: false,
      activeName: "data",
      titleSource: "",
      visualizationList: {
        basic: true,
        custom: true,
        system: true,
      },
      detailsId: "", // 联系人id
      detailsEId: "", // 企业id
      // 搜索条件
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      searchList: {
        page: 1,
        size: "20",
        kw: "",
        stage: "",
      },
      datanumber: "0",
      seenumber: "0",
      pagenumber: "0",
      dialogGh: false,
      ghForm: {
        id: "",
        title: "",
        stage_id: "",
        goods_id: "",
        amount: "",
        expect_date: "",
        competitor: "",
        competitor_remark: "",
        keywords: "",
        contacts_id: "",
        department_id: "",
      },
      rulesGh: {
        title: [{ required: true, message: "请输入机会名称", trigger: "blur" }],
        stage_id: [
          { required: true, message: "请选择销售阶段", trigger: "change" },
        ],
        goods_id: [
          { required: true, message: "请选择意向产品", trigger: "change" },
        ],
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        expect_date: [
          { required: true, message: "请选择预计成单日期", trigger: "change" },
        ],
        competitor: [
          { required: true, message: "请输入竞争对手", trigger: "blur" },
        ],
        competitor_remark: [
          { required: true, message: "请输入竞争对手信息", trigger: "blur" },
        ],
        keywords: [
          { required: true, message: "请输入关键词", trigger: "blur" },
        ],
        contacts_id: [
          { required: true, message: "请选择联系人", trigger: "change" },
        ],
      },
      tableData: [],
      departmentList: [],
      contactsList: [],
      intProductsList: [],
      salesStage: [],
      detailsData: [],
      stageNumber: "0",
      // 放弃销售机会
      giveupS: false,
      giveupData: {
        id: "",
        give_remark: "",
      },
      gurules: {
        give_remark: [
          { required: true, message: "请输入放弃原因", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.loading = true;
    this.getdepartment();
    this.getcontacts();
    this.getintProducts();
    this.getsalesStage();
    this.getData();
  },
  methods: {
    // 获取部门下拉数据
    getdepartment() {
      this.$cmsapi.departmentList().then(
        (res) => {
          if (res.code == 0) {
            this.departmentList = res.data[0].childlist;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 获取联系人下拉数据
    getcontacts() {
      this.$cmsapi.searchContacts().then(
        (res) => {
          if (res.code == 0) {
            this.contactsList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 获取意向产品下拉数据
    getintProducts() {
      this.$cmsapi.labelLibraryList("ety3bHEAAAN14h1nV-57IzrhPEATLd9A").then(
        (res) => {
          if (res.code == 0) {
            this.intProductsList = res.data[0].tag;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 获取销售阶段下拉数据
    getsalesStage() {
      this.$cmsapi.stageList().then(
        (res) => {
          if (res.code == 0) {
            this.salesStage = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 获取列表数据
    getData() {
      this.$cmsapi.salesList(this.searchList).then(
        (res) => {
          if (res.code == 0) {
            this.seenumber = this.searchList.size * this.searchList.page;
            this.datanumber = res.count;
            this.pagenumber = Math.ceil(res.count / this.searchList.size);
            this.tableData = res.data;
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 最大条数变化
    sizechange() {
      this.loading = true;
      this.getData();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getData();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getData();
    },
    // 搜索
    search() {
      this.loading = true;
      this.getData();
    },
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
      this.loading = true;
      this.getData();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 查看详情页面
    cdetails(id) {
      this.$cmsapi.findSales(id).then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            res.data.goods_name =
              res.data.goods && res.data.goods !== ""
                ? res.data.goods.join(",")
                : "";
            // 获取销售阶段的序号
            for (let i = 0; i < this.salesStage.length; i++) {
              if (this.salesStage[i].id == res.data.stage_id) {
                this.stageNumber = i + 1;
                break;
              }
            }
            this.detailsData = res.data;
            this.detailsS = true;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 企业详情页面
    findEnterprise() {
      this.detailsEId = this.detailsData.customer_id;
      this.$refs.detailsEnterprise.cDetails = true;
    },
    // 联系人详情页面
    findContacts() {
      this.detailsId = this.detailsData.contacts_id;
      this.$refs.detailscontacts.cDetails = true;
    },
    // 新增编辑
    showEditer(obj) {
      if (obj) {
        this.pagestart = 1;
        this.titleSource = "编辑销售机会";
        this.ghForm = {
          id: this.detailsData.id,
          title: this.detailsData.title,
          stage_id: this.detailsData.stage_id,
          goods_id: this.detailsData.goods_id.split(","),
          amount: this.detailsData.amount,
          expect_date: this.detailsData.expect_date,
          competitor: this.detailsData.competitor,
          competitor_remark: this.detailsData.competitor_remark,
          keywords: this.detailsData.keywords,
          contacts_id: this.detailsData.contacts_id,
          department_id: this.detailsData.department_id,
          remark: this.detailsData.remark,
        };
      } else {
        this.pagestart = 0;
        this.titleSource = "新增销售机会";
      }
      this.dialogGh = true;
    },
    // 放弃机会
    guEditer(id) {
      this.giveupData.id = id;
      this.giveupS = true;
    },
    // 提交数据
    submitGh(formName) {
      let e_id = this.ghForm.id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$cmsapi.salesSave(this.ghForm).then(
            (res) => {
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.dialogGh = false;
                this.getData();
                if (this.detailsS) {
                  this.cdetails(e_id);
                }
              } else {
                this.loading = false;
                this.$message.error(res.msg);
              }
            },
            (err) => {
              console.log(err);
              this.loading = false;
            }
          );
          this.dialogGh = false;
          this.ghForm = this.$options.data().ghForm;
        } else {
          console.log("error submit!!");
          this.$message({
            message: "请下拉填完必输选项进行操作！",
            type: "warning",
          });
          return false;
        }
      });
    },
    resetGh(formName) {
      this.$refs[formName].resetFields();
      this.dialogGh = false;
      this.ghForm = this.$options.data().ghForm;
    },
    // 提交
    submitGu(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$cmsapi.giveSales(this.giveupData).then(
            (res) => {
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.giveupS = false;
                this.giveupData = this.$options.data().giveupData;
                this.getData();
              } else {
                this.$message.error(res.msg);
                this.getData();
              }
            },
            (err) => {
              console.log(err);
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置&取消
    resetGu(formName) {
      this.$refs[formName].resetFields();
      this.giveupS = false;
      this.giveupData = this.$options.data().giveupData;
    },
  },
};
</script>
<style scoped>
.el-form {
  width: 90%;
}
/deep/ .el-drawer__header {
  margin-bottom: 20px !important;
}
/* 详情头部 */
.top_data {
  background-color: #f8f9fa;
  padding: 15px;
  margin: 15px;
  margin-top: 0px;
  border-radius: 10px;
  border: 1px solid #f0f0f4;
}
.t_title {
  display: flex;
  font-weight: bolder;
  margin-bottom: 10px;
}
.t_title img {
  width: 20px;
  margin-right: 10px;
}
.t_content {
  line-height: 20px;
  font-size: 12px;
  color: #7887a0;
}
.t_content div {
  display: inherit;
}
.operation {
  float: right;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.step {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  /* overflow-x: scroll; */
  overflow-y: hidden;
}
.drawer_pad,
.el-descriptions,
/deep/ .el-step__title {
  font-size: 12px;
}
/deep/ .el-step__main {
  white-space: inherit;
  margin-right: 100px;
}
/* 详情日志 */
.bigDetails {
  margin: 10px 0;
}
.detailsLog {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  color: #9b929b;
  background: #f8f9fa;
}
h6 {
  background: #f8f9fa;
  line-height: 25px;
  padding: 10px;
  margin: 10px 0 !important;
}
/deep/ .el-tabs__header {
  margin: 0;
}
</style>